import React, { PureComponent } from 'react';
import {
  Row, Col, Card, DatePicker, TimePicker, Button, Form,
  Select, InputNumber, Switch, Radio,
  Slider, Upload, Icon, Rate,
} from 'antd';

// 组件附属
const FormItem = Form.Item;
const MonthPicker = DatePicker.MonthPicker;
const RangePicker = DatePicker.RangePicker;
const Option = Select.Option;
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;

@Form.create()
export default class UploadDemo extends PureComponent {
  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    const config = {
      rules: [{ type: 'object', required: true, message: 'Please select time!' }],
    };
    const rangeConfig = {
      rules: [{ type: 'array', required: true, message: 'Please select time!' }],
    };
    return (
      <Row gutter={16}>
        <Col span={12}>
          <Card title="时间类控件">
            <Form>
              <FormItem {...formItemLayout} label="DatePicker">
                {getFieldDecorator('date-picker', config)(
                  <DatePicker />
                )}
              </FormItem>
              <FormItem {...formItemLayout} label="DatePicker[showTime]">
                {getFieldDecorator('date-time-picker', config)(
                  <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
                )}
              </FormItem>
              <FormItem
                {...formItemLayout}
                label="MonthPicker"
              >
                {getFieldDecorator('month-picker', config)(
                  <MonthPicker />
                )}
              </FormItem>
              <FormItem
                {...formItemLayout}
                label="TimePicker"
              >
                {getFieldDecorator('time-picker', config)(
                  <TimePicker />
                )}
              </FormItem>
            </Form>
          </Card>
        </Col>
        <Col span={12}>
          <Card title="其他控件">
            <Form>
              <FormItem {...formItemLayout} label="Plain Text" >
                <span className="ant-form-text">China</span>
              </FormItem>
              <FormItem
                {...formItemLayout}
                label="Select"
                hasFeedback
              >
                {getFieldDecorator('select', {
                  rules: [
                    { required: true, message: 'Please select your country!' },
                  ],
                })(
                  <Select placeholder="Please select a country">
                    <Option value="china">China</Option>
                    <Option value="use">U.S.A</Option>
                  </Select>
                )}
              </FormItem>
              <FormItem
                {...formItemLayout}
                label="Select[multiple]"
              >
                {getFieldDecorator('select-multiple', {
                  rules: [
                    { required: true, message: 'Please select your favourite colors!', type: 'array' },
                  ],
                })(
                  <Select mode="multiple" placeholder="Please select favourite colors">
                    <Option value="red">Red</Option>
                    <Option value="green">Green</Option>
                    <Option value="blue">Blue</Option>
                  </Select>
                )}
              </FormItem>
              <FormItem
                {...formItemLayout}
                label="InputNumber"
              >
                {getFieldDecorator('input-number', { initialValue: 3 })(
                  <InputNumber min={1} max={10} />
                )}
                <span className="ant-form-text"> machines</span>
              </FormItem>
              <FormItem
                {...formItemLayout}
                label="Switch"
              >
                {getFieldDecorator('switch', { valuePropName: 'checked' })(
                  <Switch />
                )}
              </FormItem>
              <FormItem
                {...formItemLayout}
                label="Slider"
              >
                {getFieldDecorator('slider')(
                  <Slider marks={{ 0: 'A', 20: 'B', 40: 'C', 60: 'D', 80: 'E', 100: 'F' }} />
                )}
              </FormItem>
              <FormItem
                {...formItemLayout}
                label="Radio.Group"
              >
                {getFieldDecorator('radio-group')(
                  <RadioGroup>
                    <Radio value="a">item 1</Radio>
                    <Radio value="b">item 2</Radio>
                    <Radio value="c">item 3</Radio>
                  </RadioGroup>
                )}
              </FormItem>
              <FormItem
                {...formItemLayout}
                label="Radio.Button"
              >
                {getFieldDecorator('radio-button')(
                  <RadioGroup>
                    <RadioButton value="a">item 1</RadioButton>
                    <RadioButton value="b">item 2</RadioButton>
                    <RadioButton value="c">item 3</RadioButton>
                  </RadioGroup>
                )}
              </FormItem>
              <FormItem
                {...formItemLayout}
                label="Rate"
              >
                {getFieldDecorator('rate', {
                  initialValue: 3.5,
                })(
                  <Rate />
                )}
              </FormItem>
              <FormItem
                {...formItemLayout}
                label="Upload"
                extra="longgggggggggggggggggggggggggggggggggg"
              >
                {getFieldDecorator('upload', {
                  valuePropName: 'fileList',
                  getValueFromEvent: this.normFile,
                })(
                  <Upload name="logo" action="/upload.do" listType="picture">
                    <Button>
                      <Icon type="upload" /> Click to upload
                    </Button>
                  </Upload>
                )}
              </FormItem>
            </Form>
          </Card>
        </Col>
      </Row>
    );
  }
}
